Pure.CSS একটি লাইটওয়েট এবং সিম্পল CSS ফ্রেমওয়ার্ক, যা ওয়েব ডিজাইন এবং ডেভেলপমেন্টে দ্রুত কাজ করতে সাহায্য করে। এর মধ্যে কিছু অত্যন্ত শক্তিশালী Utility Classes অন্তর্ভুক্ত থাকে, যা আপনাকে সাধারণ CSS স্টাইলিং, প্যাডিং, মার্জিন, বর্ডার, এবং আরও অনেক কিছুর জন্য দ্রুত ক্লাস প্রয়োগ করতে দেয়। Utility classes আপনাকে দ্রুত ওয়েব পেজের উপাদানগুলির ডিজাইন কাস্টমাইজ করতে সহায়তা করে, বিশেষ করে যখন আপনি দ্রুত প্রোটোটাইপ তৈরি করতে চান।
Pure.CSS এর Utility Classes
Pure.CSS এর Utility Classes বিভিন্ন সাধারণ CSS প্রোপার্টি যেমন spacing, text alignment, display types, background colors, ইত্যাদি কন্ট্রোল করতে ব্যবহার করা হয়। এগুলি ব্যবহার করে আপনি HTML ট্যাগগুলিতে স্টাইল অ্যাপ্লাই করতে পারেন, যা কোডের পরিমাণ কমিয়ে আনে এবং দ্রুত ডিজাইন তৈরি করতে সহায়তা করে।
1. Spacing Utilities (Margin and Padding)
Pure.CSS স্পেসিং এর জন্য কিছু খুবই সহজ এবং কার্যকরী utility classes প্রদান করে, যা মার্জিন এবং প্যাডিং নিয়ন্ত্রণ করতে সাহায্য করে।
Margin and Padding Utility Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Margin and Padding</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-u-1-2 pure-u-sm-1-4">
<div class="pure-u-1 pure-u-md-1-2 pure-margin-bottom">
<p class="pure-padding-small">This paragraph has small padding.</p>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-margin-top">
<p class="pure-padding-medium">This paragraph has medium padding.</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
pure-u-1-2এবংpure-u-sm-1-4: এই ক্লাসগুলি গ্রিড সিস্টেমের অংশ এবং বিভিন্ন স্ক্রীন সাইজে কলামের আকার নিয়ন্ত্রণ করে।pure-margin-topএবংpure-margin-bottom: এগুলি মার্জিনের জন্য ইউটিলিটি ক্লাস, যা ট্যাগের উপরের এবং নিচের অংশে স্পেস যোগ করতে ব্যবহৃত হয়।pure-padding-smallএবংpure-padding-medium: প্যাডিং নিয়ন্ত্রণের জন্য ইউটিলিটি ক্লাস।
2. Text Alignment and Typography Utilities
Pure.CSS এর মাধ্যমে আপনি খুব সহজেই text alignment এবং typography নিয়ন্ত্রণ করতে পারেন। বিভিন্ন ক্লাসের মাধ্যমে আপনি টেক্সটের অবস্থান, আকার, এবং ফন্ট সাইজ কাস্টমাইজ করতে পারবেন।
Text Alignment Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Text Alignment</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-u-1">
<h1 class="pure-text-center">Centered Text</h1>
<p class="pure-text-left">This paragraph is aligned to the left.</p>
<p class="pure-text-right">This paragraph is aligned to the right.</p>
</div>
</body>
</html>
ব্যাখ্যা:
pure-text-center: টেক্সটকে কেন্দ্রস্থলে (center) প্রদর্শন করে।pure-text-left: টেক্সটকে বামে (left) অ্যালাইন করে।pure-text-right: টেক্সটকে ডানে (right) অ্যালাইন করে।
3. Display Utilities (Visibility, Flexbox)
Pure.CSS এর মাধ্যমে আপনি বিভিন্ন ধরনের display প্রপার্টি যেমন block, inline, flex ইত্যাদি খুব সহজে অ্যাপ্লাই করতে পারেন।
Display and Flexbox Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Display Utilities</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2 pure-u-sm-1-4 pure-flex">
<div class="pure-u-1">
<p>This is a flex item</p>
</div>
</div>
<div class="pure-u-1-2 pure-u-sm-1-4">
<p>This is a block item.</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
pure-flex: এটি একটি flexbox কন্টেইনার তৈরি করে, যা ফ্লেক্স আইটেমগুলিকে সহজে সজ্জিত করতে সাহায্য করে।pure-u-1-2: একটি গ্রিড আইটেমকে 50% প্রস্থে সেট করে।pure-u-sm-1-4: ছোট স্ক্রীনে, এটি 1/4 প্রস্থে সজ্জিত হবে।
4. Background Colors and Borders
Pure.CSS আপনাকে খুব সহজেই background colors এবং borders অ্যাপ্লাই করার জন্য কিছু ইউটিলিটি ক্লাস প্রদান করে।
Background and Border Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Background and Border</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-u-1-3 pure-bg-primary">
<p>This div has a primary background color.</p>
</div>
<div class="pure-u-1-3 pure-border">
<p>This div has a border.</p>
</div>
</body>
</html>
ব্যাখ্যা:
pure-bg-primary: ব্যাকগ্রাউন্ড রঙের জন্য ইউটিলিটি ক্লাস। এই ক্লাসের মাধ্যমে প্রাথমিক ব্যাকগ্রাউন্ড রঙ অ্যাপ্লাই করা হয়।pure-border: এটি একটি সাধারণ বর্ডার যোগ করে।
5. Float Utilities
Pure.CSS এর মাধ্যমে আপনি এলিমেন্টকে float করতে পারেন যাতে সেগুলি ডান বা বামে সাজানো যায়।
Float Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Float Utility</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-u-1">
<img src="https://via.placeholder.com/150" class="pure-float-left" alt="Float Left">
<p>This image is floated to the left.</p>
</div>
<div class="pure-u-1">
<img src="https://via.placeholder.com/150" class="pure-float-right" alt="Float Right">
<p>This image is floated to the right.</p>
</div>
</body>
</html>
ব্যাখ্যা:
pure-float-left: এটি এলিমেন্টকে বামে (left) ভাসমান করে।pure-float-right: এটি এলিমেন্টকে ডানে (right) ভাসমান করে।
Pure.CSS এর Utility Classes আপনার ডেভেলপমেন্ট প্রসেস দ্রুত এবং আরও কার্যকরী করে তোলে। এই ক্লাসগুলো ব্যবহার করে আপনি দ্রুত মার্জিন, প্যাডিং, টেক্সট অ্যালাইনমেন্ট, ব্যাকগ্রাউন্ড রঙ, বর্ডার, ফ্লেক্সবক্স, ডিসপ্লে প্রপার্টি এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন। Utility Classes আপনার কোডকে সহজ এবং পরিষ্কার রাখে, যা দ্রুত ওয়েব ডিজাইন তৈরি করতে সাহায্য করে।
Pure.CSS একটি লাইটওয়েট এবং মোডুলার CSS ফ্রেমওয়ার্ক যা অনেক ধরনের Built-in Utility Classes প্রদান করে। এই utility classes গুলি সাধারণত ওয়েব ডেভেলপমেন্টে দ্রুত এবং কার্যকরীভাবে বিভিন্ন ধরনের স্টাইলিং প্রয়োগ করতে ব্যবহৃত হয়। এগুলির মাধ্যমে আপনি সহজেই টেক্সট, মার্জিন, প্যাডিং, বর্ডার, ফন্ট সাইজ, এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন।
Pure.CSS এর Utility Classes ব্যবহার করে আপনি খুব দ্রুত ওয়েব পেজের স্টাইলিং পরিবর্তন করতে পারেন এবং প্রয়োজন অনুযায়ী কাস্টম স্টাইল তৈরি করতে পারেন। নিচে কিছু জনপ্রিয় utility classes এবং তাদের ব্যবহার দেখানো হয়েছে।
1. Margin & Padding Utilities:
Margin এবং Padding হল ওয়েব ডিজাইনিং-এর অন্যতম গুরুত্বপূর্ণ অংশ। Pure.CSS এ মার্জিন এবং প্যাডিং পরিচালনা করার জন্য কয়েকটি বিল্ট-ইন ক্লাস রয়েছে।
Margin (মার্জিন) কাস্টমাইজ করা:
<!-- Margin-Top -->
<div class="pure-u-1 pure-u-lg-1-2 pure-u-lg-margin-top-20">Content</div>
এখানে, pure-u-lg-margin-top-20 ক্লাসটি বড় স্ক্রীনে (ডেস্কটপ) উপাদানের ওপর ২০px মার্জিন যোগ করবে।
Padding (প্যাডিং) কাস্টমাইজ করা:
<!-- Padding -->
<div class="pure-u-1 pure-u-md-padding-20">Content</div>
এখানে, pure-u-md-padding-20 ক্লাসটি মিডিয়াম স্ক্রীনে (ট্যাবলেট) উপাদানের চারপাশে ২০px প্যাডিং যোগ করবে।
2. Text Alignment Utilities:
Pure.CSS এর Text Alignment ক্লাসগুলো দিয়ে আপনি সহজেই টেক্সট কেন্দ্রিত, ডান বা বাম দিকে সজ্জিত করতে পারেন।
Text Centering (টেক্সট কেন্দ্রিত করা):
<p class="pure-text-center">This text is centered.</p>
এখানে, pure-text-center ক্লাসটি টেক্সটটিকে সেন্টারে রাখবে।
Text Alignment (টেক্সটের অবস্থান পরিবর্তন করা):
<p class="pure-text-left">This text is left aligned.</p>
<p class="pure-text-right">This text is right aligned.</p>
এখানে, pure-text-left এবং pure-text-right ক্লাসগুলির মাধ্যমে টেক্সটকে বাম বা ডান দিকে সাজানো হবে।
3. Display Utilities:
Display Utilities ব্যবহার করে আপনি ওয়েব উপাদানগুলিকে ব্লক, ইনলাইন বা হিডেন (অদৃশ্য) করে রাখতে পারেন।
Block Display (ব্লক ডিসপ্লে):
<div class="pure-u-1 pure-u-md-display-block">
This element will be displayed as a block.
</div>
Inline Display (ইনলাইন ডিসপ্লে):
<div class="pure-u-1 pure-u-md-display-inline">
This element will be displayed inline.
</div>
Hide Element (উপাদান লুকানো):
<div class="pure-u-1 pure-u-md-display-none">
This element will be hidden on medium and larger screens.
</div>
এখানে, pure-u-md-display-none ক্লাসটি উপাদানটি মিডিয়াম এবং বড় স্ক্রীনে অদৃশ্য করে ফেলবে।
4. Flexbox Utilities:
Flexbox ব্যবহার করে উপাদানগুলির অবস্থান এবং সাইজ নিয়ন্ত্রণ করতে পারেন। Pure.CSS-এ Flexbox কনটেইনার এবং আইটেমগুলির জন্য কিছু বিল্ট-ইন ক্লাস রয়েছে।
Flex Container (ফ্লেক্স কন্টেইনার):
<div class="pure-g">
<div class="pure-u-1-3">Content 1</div>
<div class="pure-u-1-3">Content 2</div>
<div class="pure-u-1-3">Content 3</div>
</div>
এখানে, pure-g ক্লাসটি ফ্লেক্স কন্টেইনার তৈরি করবে এবং pure-u-1-3 ক্লাসটি তিনটি উপাদানকে ১/৩ অংশে বিভক্ত করবে।
Flex Alignment (ফ্লেক্স অ্যালাইনমেন্ট):
<div class="pure-g pure-u-md-align-center">
<div class="pure-u-1-3">Content 1</div>
<div class="pure-u-1-3">Content 2</div>
<div class="pure-u-1-3">Content 3</div>
</div>
এখানে, pure-u-md-align-center ক্লাসটি উপাদানগুলোকে মাঝখানে কেন্দ্রিত করবে।
5. Font Size and Weight Utilities:
Font Size এবং Font Weight নিয়ন্ত্রণ করতে Pure.CSS এর ক্লাস ব্যবহার করা হয়।
Font Size (ফন্ট সাইজ) কাস্টমাইজ করা:
<p class="pure-font-size-20">This is a 20px font size.</p>
এখানে, pure-font-size-20 ক্লাসটি টেক্সটের সাইজ ২০px করে দিবে।
Font Weight (ফন্ট ওয়েট) কাস্টমাইজ করা:
<p class="pure-font-weight-bold">This text is bold.</p>
এখানে, pure-font-weight-bold ক্লাসটি টেক্সটটিকে বোল্ড করে দিবে।
6. Margin and Padding for Specific Sides:
যদি আপনি শুধুমাত্র কোনো একটি দিকে মার্জিন বা প্যাডিং দিতে চান, তাহলে Pure.CSS এর কিছু বিশেষ ক্লাস ব্যবহার করতে পারেন।
Top Margin:
<p class="pure-u-1 pure-u-md-margin-top-20">This text has a top margin of 20px on medium and larger screens.</p>
Bottom Padding:
<p class="pure-u-1 pure-u-md-padding-bottom-20">This text has a bottom padding of 20px on medium and larger screens.</p>
7. Background Color Utilities:
Pure.CSS এ ব্যাকগ্রাউন্ড কালারের জন্য কিছু বিল্ট-ইন ক্লাস রয়েছে যা ব্যবহার করে আপনি সহজেই উপাদানের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে পারেন।
Background Color:
<div class="pure-u-1 pure-u-md-background-green">
This element has a green background on medium and larger screens.
</div>
এখানে, pure-u-md-background-green ক্লাসটি মিডিয়াম এবং বড় স্ক্রীনে ব্যাকগ্রাউন্ড রঙ সবুজ করে দিবে।
Pure.CSS এর Built-in Utility Classes ব্যবহার করে আপনি দ্রুত ওয়েব ডিজাইনে প্রয়োজনীয় পরিবর্তন এবং কাস্টমাইজেশন করতে পারেন। এই ইউটিলিটি ক্লাসগুলির মাধ্যমে আপনি সহজেই মার্জিন, প্যাডিং, ডিসপ্লে, ফন্ট সাইজ, অ্যালাইনমেন্ট এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন। Pure.CSS এর ক্লাসগুলো responsive এবং mobile-first ডিজাইন তৈরিতে অত্যন্ত কার্যকরী, এবং এটি আপনার ওয়েব ডিজাইনকে আরও দ্রুত এবং কার্যকরভাবে তৈরি করতে সহায়তা করবে।
Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক, যা Spacing, Margin, এবং Padding এর জন্য সহজ এবং কার্যকরী Utility Classes প্রদান করে। এই ক্লাসগুলি ব্যবহার করে আপনি দ্রুত এবং নমনীয়ভাবে আপনার ওয়েব পেজের উপাদানগুলির মধ্যে জায়গা (spacing) যোগ বা কমাতে পারেন। এতে করে আপনাকে কাস্টম CSS কোড লেখার প্রয়োজন হয় না, এবং কোডিং আরো দ্রুত এবং সহজ হয়ে ওঠে।
1. Spacing, Margin, and Padding Overview in Pure.CSS:
- Spacing: এটি টেক্সট বা উপাদানগুলির মধ্যে সঠিক পরিমাণের জায়গা প্রদান করে।
- Margin: উপাদানের বাইরের জায়গা (অর্থাৎ, উপাদানের চারপাশে থাকা ফাঁকা স্থান) নিয়ন্ত্রণ করে।
- Padding: উপাদানের ভিতরের জায়গা (অর্থাৎ, উপাদানের কনটেন্ট এবং বর্ডারের মধ্যে ফাঁকা স্থান) নিয়ন্ত্রণ করে।
Pure.CSS-এ spacing, margin, এবং padding নিয়ন্ত্রণ করতে অনেক সহজ utility classes রয়েছে। এগুলি আপনার ডিজাইনকে দ্রুত কাস্টমাইজ করার জন্য সহায়ক।
2. Utility Classes for Margin and Padding in Pure.CSS:
Pure.CSS কিছু সাধারণ margin এবং padding ক্লাস সরবরাহ করে, যেগুলি আপনি HTML এলিমেন্টগুলিতে প্রয়োগ করতে পারেন।
Margin Utility Classes in Pure.CSS:
Pure.CSS-এ margin নিয়ন্ত্রণের জন্য কিছু predefined ক্লাস রয়েছে। এগুলি ব্যবহার করে আপনি সহজেই উপাদানের চারপাশে জায়গা (margin) যোগ করতে পারেন।
pure-u-margin-xs-*: অতিরিক্ত ছোট মার্জিন।pure-u-margin-sm-*: ছোট মার্জিন।pure-u-margin-md-*: মধ্যম মার্জিন।pure-u-margin-lg-*: বড় মার্জিন।
Padding Utility Classes in Pure.CSS:
অ্যানালগাসভাবে, Pure.CSS কিছু predefined padding ক্লাসও সরবরাহ করে যা আপনি উপাদানের ভিতরে জায়গা (padding) যোগ করতে ব্যবহার করতে পারেন।
pure-u-padding-xs-*: অতিরিক্ত ছোট প্যাডিং।pure-u-padding-sm-*: ছোট প্যাডিং।pure-u-padding-md-*: মধ্যম প্যাডিং।pure-u-padding-lg-*: বড় প্যাডিং।
Margin এবং Padding উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spacing, Margin and Padding with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Styling */
.box {
background-color: #4CAF50;
color: white;
text-align: center;
}
</style>
</head>
<body>
<!-- Example with Margin -->
<div class="box pure-u-margin-md-2">
<p>This box has medium margin</p>
</div>
<!-- Example with Padding -->
<div class="box pure-u-padding-md-2">
<p>This box has medium padding</p>
</div>
<!-- Example with both Margin and Padding -->
<div class="box pure-u-margin-sm-1 pure-u-padding-lg-3">
<p>This box has small margin and large padding</p>
</div>
</body>
</html>
ব্যাখ্যা:
pure-u-margin-md-2: এই ক্লাসটি মার্জিনের জন্য ব্যবহার করা হয়েছে এবং এটি একটি মাঝারি মার্জিন (২ ইউনিট) যোগ করেছে।pure-u-padding-md-2: এই ক্লাসটি প্যাডিংয়ের জন্য ব্যবহার করা হয়েছে এবং এটি একটি মাঝারি প্যাডিং (২ ইউনিট) যোগ করেছে।pure-u-margin-sm-1এবংpure-u-padding-lg-3: এই ক্লাসগুলির মাধ্যমে একটি ছোট মার্জিন এবং একটি বড় প্যাডিং যোগ করা হয়েছে।
3. Spacing for Grid System in Pure.CSS:
Pure.CSS এর Grid System এর মধ্যে spacing নিয়ন্ত্রণ করতে আপনি margin এবং padding ব্যবহার করতে পারেন, যা টেবিল, ফর্ম, কলাম ইত্যাদি উপাদানগুলির মধ্যে দূরত্ব তৈরি করতে সাহায্য করে।
Grid Example with Spacing (Margin & Padding):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Spacing with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Styles */
.pure-g {
margin-top: 20px;
}
.pure-u-1-2 {
background-color: #8BC34A;
padding: 20px;
margin: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">
<p>Column 1 with padding and margin</p>
</div>
<div class="pure-u-1-2">
<p>Column 2 with padding and margin</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
.pure-g: গ্রিড কন্টেইনারের জন্য মার্জিন টপ (২০px) সেট করা হয়েছে, যাতে কলামগুলোর মধ্যে কিছু দূরত্ব থাকে।.pure-u-1-2: প্রতিটি কলামের জন্য প্যাডিং (২০px) এবং মার্জিন (১০px) যোগ করা হয়েছে।
4. Customizing Spacing Classes in Pure.CSS:
Pure.CSS-এ সরাসরি margin এবং padding এর জন্য কোনো বৈশিষ্ট্য না থাকলেও, আপনি নিজের প্রয়োজন অনুযায়ী কাস্টম ক্লাস তৈরি করতে পারেন এবং @media queries এর মাধ্যমে এই ক্লাসগুলি কাস্টমাইজ করতে পারেন।
Customizing Spacing with Custom Classes Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Spacing Classes</title>
<style>
.spacing-small {
margin: 5px;
padding: 10px;
}
.spacing-medium {
margin: 15px;
padding: 20px;
}
.spacing-large {
margin: 30px;
padding: 40px;
}
/* For mobile devices */
@media (max-width: 600px) {
.spacing-small {
margin: 2px;
padding: 5px;
}
}
</style>
</head>
<body>
<div class="spacing-small" style="background-color: lightblue;">
<p>Small spacing (margin and padding)</p>
</div>
<div class="spacing-medium" style="background-color: lightgreen;">
<p>Medium spacing (margin and padding)</p>
</div>
<div class="spacing-large" style="background-color: lightcoral;">
<p>Large spacing (margin and padding)</p>
</div>
</body>
</html>
ব্যাখ্যা:
.spacing-small,.spacing-medium,.spacing-large: এই কাস্টম ক্লাসগুলির মাধ্যমে মার্জিন এবং প্যাডিং ভ্যালু সেট করা হয়েছে।@media: ছোট স্ক্রীনে (মোবাইল) মার্জিন এবং প্যাডিং ছোট করা হয়েছে, যাতে এটি আরও কমপ্যাক্ট হয়।
Pure.CSS এর Utility Classes ব্যবহার করে আপনি সহজেই Spacing, Margin, এবং Padding নিয়ন্ত্রণ করতে পারেন। এই ক্লাসগুলো আপনার ওয়েব পেজের উপাদানগুলির মধ্যে জায়গা দ্রুত কাস্টমাইজ এবং কন্ট্রোল করতে সহায়তা করে, যাতে রেসপনসিভ ওয়েব ডিজাইন তৈরি করা যায়। Margin এবং Padding ক্লাসগুলি আপনাকে আপনার উপাদানগুলির মধ্যে সঠিক পরিমাণ জায়গা দিতে সাহায্য করবে, যা আপনার ডিজাইনে পরিপূর্ণতা এবং সৌন্দর্য যোগ করবে।
Pure.CSS একটি সহজ এবং দ্রুত CSS ফ্রেমওয়ার্ক যা ওয়েব ডিজাইনে দ্রুত কাজ করার জন্য অনেক প্রাক-কনফিগারড ক্লাস প্রদান করে। এর মধ্যে Text Alignment এবং Visibility Classes ক্লাসগুলো রয়েছে যা ওয়েব পেজের টেক্সট এবং উপাদানগুলির স্টাইলিং এবং দৃশ্যমানতা নিয়ন্ত্রণ করতে সহায়তা করে।
এখানে Pure.CSS এর Text Alignment এবং Visibility Classes এর ব্যবহার নিয়ে বিস্তারিত আলোচনা করা হলো।
1. Text Alignment in Pure.CSS
Pure.CSS এর মধ্যে বিভিন্ন text alignment ক্লাস রয়েছে যা আপনাকে সহজেই টেক্সটকে বাম, ডান অথবা কেন্দ্রে অবস্থান করতে সাহায্য করবে।
Text Alignment Classes:
.pure-text-align-left: টেক্সট বাম দিকে সারিবদ্ধ করবে।.pure-text-align-center: টেক্সট কেন্দ্রস্থলে সারিবদ্ধ করবে।.pure-text-align-right: টেক্সট ডান দিকে সারিবদ্ধ করবে.
Text Alignment Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Text Alignment Example</title>
</head>
<body>
<div class="pure-text-align-left">
<h2>Left Aligned Text</h2>
<p>This paragraph is aligned to the left using the .pure-text-align-left class.</p>
</div>
<div class="pure-text-align-center">
<h2>Center Aligned Text</h2>
<p>This paragraph is aligned to the center using the .pure-text-align-center class.</p>
</div>
<div class="pure-text-align-right">
<h2>Right Aligned Text</h2>
<p>This paragraph is aligned to the right using the .pure-text-align-right class.</p>
</div>
</body>
</html>
ব্যাখ্যা:
pure-text-align-left: টেক্সটকে বাম দিকে সারিবদ্ধ করার জন্য এই ক্লাসটি ব্যবহার করা হয়েছে।pure-text-align-center: টেক্সটকে কেন্দ্রস্থলে সারিবদ্ধ করতে এই ক্লাস ব্যবহার করা হয়েছে।pure-text-align-right: টেক্সটকে ডান দিকে সারিবদ্ধ করার জন্য এই ক্লাসটি ব্যবহার করা হয়েছে।
এটি টেক্সট অ্যালাইনমেন্টে সবচেয়ে সাধারণ এবং দ্রুত পদ্ধতি, যেখানে আপনার ওয়েবসাইটের যেকোনো টেক্সট বা প্যারাগ্রাফ দ্রুত স্থানান্তরিত হতে পারে।
2. Visibility Classes in Pure.CSS
Visibility Classes ব্যবহার করে আপনি একটি উপাদানকে দৃশ্যমান বা অদৃশ্য (hidden) করতে পারেন। Pure.CSS এর মধ্যে pure-hidden ক্লাস রয়েছে যা কোনো উপাদানকে visibility: hidden বা display: none করতে সাহায্য করে।
Visibility Classes:
.pure-hidden: এই ক্লাসটি ব্যবহৃত হলে, উপাদানটি display: none; হয়ে যাবে, অর্থাৎ উপাদানটি সম্পূর্ণভাবে হাইড হয়ে যাবে এবং তা DOM এর মধ্যে থাকবে না।.pure-visible: এই ক্লাসটি ব্যবহৃত হলে, উপাদানটি দৃশ্যমান হবে, যদি কোনো কারণে সেটি আগে লুকানো হয়ে থাকে।
Visibility Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Visibility Example</title>
</head>
<body>
<div class="pure-visible">
<h2>Visible Text</h2>
<p>This text is visible on the page by default using the .pure-visible class.</p>
</div>
<div class="pure-hidden">
<h2>Hidden Text</h2>
<p>This text is hidden using the .pure-hidden class. It won't be visible on the page.</p>
</div>
</body>
</html>
ব্যাখ্যা:
pure-visible: এটি ব্যবহৃত হলে উপাদানটি দৃশ্যমান হবে, যদি এটি আগে কোনো কারণে লুকানো থাকে।pure-hidden: এই ক্লাসটি উপাদানটিকে সম্পূর্ণভাবে গোপন করে রাখবে। এটি সাইটের DOM থেকে পুরোপুরি হাইড হয়ে যাবে এবং ব্রাউজারে দেখাবে না।
3. Additional Text and Visibility Customization
Pure.CSS তে text visibility এবং text alignment নিয়ন্ত্রণ করতে আরও অনেক ক্লাস এবং কাস্টম স্টাইলস যোগ করা যেতে পারে। এর মধ্যে আপনার কাস্টম ফন্ট, সাইজ, স্টাইল এবং অন্যান্য স্টাইলিং প্রয়োগ করা যেতে পারে।
Example with Custom Text and Visibility:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<style>
.highlighted-text {
font-size: 20px;
font-weight: bold;
color: #007acc;
}
.hidden-text {
display: none;
}
</style>
<title>Text and Visibility Customization</title>
</head>
<body>
<div class="pure-text-align-center highlighted-text">
<h2>Custom Styled Text</h2>
<p>This is custom styled text with a larger font and a specific color.</p>
</div>
<div class="hidden-text">
<h2>Hidden Text</h2>
<p>This text is hidden by custom CSS using display: none;</p>
</div>
</body>
</html>
ব্যাখ্যা:
.highlighted-text: এখানে কাস্টম ফন্ট সাইজ, ফন্ট ওয়েট এবং কালার নির্ধারণ করা হয়েছে।.hidden-text: এটি কাস্টমভাবে display: none; ব্যবহার করে টেক্সটটি লুকানো হয়েছে।
4. Responsive Text Alignment
আপনি media queries ব্যবহার করে বিভিন্ন স্ক্রীন সাইজের জন্য আলাদা টেক্সট অ্যালাইনমেন্ট নির্ধারণ করতে পারেন। এর ফলে মোবাইল, ট্যাবলেট এবং ডেস্কটপ স্ক্রীনে ভিন্ন ভিন্ন অ্যালাইনমেন্ট অ্যাপ্লাই করা সম্ভব।
Responsive Text Alignment Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<style>
/* Default - Center aligned text */
.responsive-text {
text-align: center;
}
/* Large screens - Left aligned text */
@media (min-width: 768px) {
.responsive-text {
text-align: left;
}
}
</style>
<title>Responsive Text Alignment</title>
</head>
<body>
<div class="responsive-text">
<h2>Responsive Text Alignment</h2>
<p>This text is centered by default, but will align to the left on large screens.</p>
</div>
</body>
</html>
ব্যাখ্যা:
text-align: center;: মোবাইল স্ক্রীনে টেক্সট সেন্টারে অ্যালাইন করা হয়।@media (min-width: 768px): বড় স্ক্রীনে, বিশেষত ট্যাবলেট এবং ডেস্কটপে টেক্সটকে বাম দিকে সজ্জিত করা হয়।
Pure.CSS ব্যবহার করে Text Alignment এবং Visibility নিয়ন্ত্রণ করা খুবই সহজ। আপনি pure-text-align-left, pure-text-align-center, pure-text-align-right ক্লাস ব্যবহার করে টেক্সটকে বিভিন্নভাবে সজ্জিত করতে পারবেন এবং pure-hidden ও pure-visible ক্লাস ব্যবহার করে উপাদানগুলোকে দৃশ্যমান বা অদৃশ্য (hidden) করতে পারবেন। এর পাশাপাশি, media queries এর মাধ্যমে আপনি স্ক্রীন সাইজ অনুযায়ী টেক্সট এবং উপাদানের দৃশ্যমানতা কাস্টমাইজ করতে পারেন। Pure.CSS এর এই সিম্পল ক্লাসগুলো ওয়েব ডেভেলপমেন্টে আপনার কাজকে আরও দ্রুত এবং সহজ করে তুলবে।
Pure.CSS দিয়ে Custom Utility Classes তৈরি করা একটি শক্তিশালী পদ্ধতি, যা আপনাকে আপনার ওয়েব পেজের জন্য কাস্টম স্টাইল দ্রুত এবং সহজে তৈরি করতে সাহায্য করবে। Utility classes এমন CSS ক্লাস যা একটি নির্দিষ্ট এবং ছোট কাজ সম্পাদন করে, যেমন মার্জিন, প্যাডিং, ফন্ট সাইজ, কালার, এবং অন্যান্য প্রপার্টি নিয়ন্ত্রণ করা। এই ক্লাসগুলো কোডকে আরও পরিষ্কার এবং রিইউজেবল করে তোলে।
Custom Utility Classes এর সুবিধা:
- Modularity: আপনার ওয়েব পেজের বিভিন্ন উপাদানের জন্য ছোট ছোট স্টাইল ক্লাস তৈরি করে আপনি পুনঃব্যবহারযোগ্য কোড লিখতে পারেন।
- Readability: কোডকে পরিষ্কার এবং সহজভাবে পড়া যায়।
- Maintainability: আপনি যখন CSS কোড পরিবর্তন করবেন, তখন শুধুমাত্র একটি ক্লাস পরিবর্তন করলেই পুরো পেজে এর প্রভাব পড়বে।
Pure.CSS এ Custom Utility Classes তৈরি করার উদাহরণ:
১. Simple Custom Utility Classes
আপনি Pure.CSS এর সাথে নিজের প্রয়োজন অনুযায়ী বিভিন্ন utility classes তৈরি করতে পারেন। যেমন, মার্জিন, প্যাডিং, ফন্ট সাইজ, এবং টেক্সট কালার নিয়ন্ত্রণ করার জন্য কিছু কাস্টম ক্লাস তৈরি করা যেতে পারে।
উদাহরণ: Simple Utility Classes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Utility Classes</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Custom Utility Classes */
.m-10 {
margin: 10px;
}
.p-20 {
padding: 20px;
}
.bg-blue {
background-color: #007bff;
color: white;
}
.text-center {
text-align: center;
}
.text-lg {
font-size: 1.25rem;
}
</style>
</head>
<body>
<div class="m-10 p-20 bg-blue text-center text-lg">
<p>This is a div with custom utility classes</p>
</div>
<div class="m-10 p-20">
<p>This is a div with some margin and padding</p>
</div>
</body>
</html>
ব্যাখ্যা:
- .m-10: এটি একটি margin ক্লাস, যা এলিমেন্টের চারপাশে ১০px মার্জিন যোগ করবে।
- .p-20: এটি একটি padding ক্লাস, যা এলিমেন্টের ভিতরে ২০px প্যাডিং যোগ করবে।
- .bg-blue: এটি একটি background-color ক্লাস, যা এলিমেন্টের ব্যাকগ্রাউন্ডকে নীল (blue) করে দেবে এবং টেক্সটের রঙ সাদা (white) হবে।
- .text-center: এটি একটি text-align ক্লাস, যা টেক্সটকে সেন্টারে এলাইন করবে।
- .text-lg: এটি একটি font-size ক্লাস, যা টেক্সটের আকার বড় (1.25rem) করবে।
২. Custom Grid Layout Utilities
আপনি Grid System এবং Flexbox সিস্টেমের জন্য কাস্টম utility classes তৈরি করতে পারেন। এই ধরনের ক্লাসগুলো আপনাকে দ্রুত এবং সহজে লেআউট তৈরি করতে সাহায্য করবে।
উদাহরণ: Custom Grid Layout Utility Classes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Grid Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Custom Grid Utility Classes */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.col-1 {
grid-column: span 1;
}
.col-2 {
grid-column: span 2;
}
.col-3 {
grid-column: span 3;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="col-1 bg-blue text-center">Item 1</div>
<div class="col-2 bg-blue text-center">Item 2</div>
<div class="col-1 bg-blue text-center">Item 3</div>
<div class="col-3 bg-blue text-center">Item 4</div>
</div>
</body>
</html>
ব্যাখ্যা:
- .grid-container: একটি কাস্টম গ্রিড কন্টেইনার যা grid-template-columns: repeat(3, 1fr) দিয়ে ৩টি কলাম তৈরি করে এবং gap: 20px দিয়ে কলামগুলোর মধ্যে ২০px গ্যাপ রাখে।
- .col-1: এটি একটি কাস্টম ক্লাস যা গ্রিডের একটি কলাম প্রস্থ ধারণ করে।
- .col-2: এটি একটি কাস্টম ক্লাস যা গ্রিডে দুটি কলাম প্রস্থ ধারণ করে।
- .col-3: এটি একটি কাস্টম ক্লাস যা গ্রিডে তিনটি কলাম প্রস্থ ধারণ করে।
এটি একটি সাধারণ grid layout তৈরি করবে, যেখানে আপনি কাস্টম ক্লাস ব্যবহার করে বিভিন্ন কলামের আকার নিয়ন্ত্রণ করতে পারবেন।
৩. Custom Flexbox Utility Classes
Pure.CSS-এ Flexbox ব্যবহারের জন্য আপনি কাস্টম utility classes তৈরি করতে পারেন, যা আপনার ডিজাইনের জন্য উপাদানগুলোকে সোজা বা সেন্টারে সাজাতে সাহায্য করবে।
উদাহরণ: Custom Flexbox Utility Classes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Flexbox Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Custom Flexbox Utility Classes */
.flex-container {
display: flex;
justify-content: space-between;
gap: 20px;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-column {
display: flex;
flex-direction: column;
gap: 20px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="pure-button">Item 1</div>
<div class="pure-button">Item 2</div>
<div class="pure-button">Item 3</div>
</div>
<div class="flex-center" style="height: 200px;">
<div class="pure-button">Centered Item</div>
</div>
<div class="flex-column">
<div class="pure-button">Item 1</div>
<div class="pure-button">Item 2</div>
<div class="pure-button">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
- .flex-container: এটি একটি flex কন্টেইনার যা উপাদানগুলোকে এক লাইনে সোজা করে এবং তাদের মধ্যে gap: 20px স্পেস রাখে।
- .flex-center: এটি একটি flex কন্টেইনার, যা উপাদানগুলোকে সেন্টার করে (দুই দিকেই সেন্টার)।
- .flex-column: এটি একটি flex কন্টেইনার, যা উপাদানগুলোকে column আকারে সাজায় (একেকটি উপাদান নতুন লাইনে আসবে)।
৪. Custom Utility Classes এর মাধ্যমে প্যাডিং এবং মার্জিন নিয়ন্ত্রণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Utility Classes - Padding & Margin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Custom Utility Classes for Padding and Margin */
.m-10 {
margin: 10px;
}
.p-20 {
padding: 20px;
}
.m-auto {
margin: auto;
}
.p-auto {
padding: auto;
}
</style>
</head>
<body>
<div class="m-10 p-20">
<p>This element has margin of 10px and padding of 20px.</p>
</div>
<div class="m-auto p-20">
<p>This element is centered with auto margins.</p>
</div>
</body>
</html>
ব্যাখ্যা:
- .m-10: এটি একটি margin ক্লাস, যা এলিমেন্টের চারপাশে ১০px মার্জিন যোগ করবে।
- .p-20: এটি একটি padding ক্লাস, যা এলিমেন্টের ভিতরে ২০px প্যাডিং যোগ করবে।
- .m-auto: এটি একটি ক্লাস যা মার্জিনকে স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট করে, যা সাধারণত এলিমেন্টগুলোকে সেন্টারে আলাইন করতে ব্যবহার হয়।
Custom Utility Classes তৈরি করার মাধ্যমে আপনি আপনার ওয়েব ডিজাইনের জন্য একটি পুনঃব্যবহারযোগ্য, সিম্পল এবং দ্রুত স্টাইলিং ব্যবস্থা তৈরি করতে পারবেন। Pure.CSS এর সাহায্যে সহজেই আপনি মার্জিন, প্যাডিং, গ্রিড, ফ্লেক্সবক্স এবং অন্যান্য স্টাইল নিয়ন্ত্রণ করতে পারবেন। এই কাস্টম ক্লাসগুলো আপনার কোডকে আরও পরিষ্কার এবং ম্যানটেইনেবল করে তুলবে।
Read more
